<template>
  <div class="app-container" >
    <el-row :gutter="20">

      <el-col :span="5" :xs="24">
          <RoleListHt :roleList="roleList" :getAllRole="getAllRole" :getMenuOrUserList="getMenuOrUserList"/>
      </el-col>

      <el-col :span="18" :xs="24">
        <el-card>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="组织人员" name="users">
                <UserListHt :userList="userList" :getUserList="getUserList" :roleId="roleId"/>
            </el-tab-pane>

            <el-tab-pane label="组织权限" name="menus">
                <MenuListHt :menuList="menuList" :menus="menus" :getMenuList="getMenuList"  :roleId="roleId"/>
            </el-tab-pane>

            <el-tab-pane label="组织信息" name="roleInfo">
              信息
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import {getRoleList,getUserOrMenuListByRoleId} from '@/api/system/index'
import RoleListHt from './pages/roleList'
import MenuListHt from './pages/menuList'
import UserListHt from './pages/userList'

export default {
  name: "Organization",
  components: {RoleListHt,MenuListHt,UserListHt},
  data(){
    return{
      activeTab: 'users',
      roleList:[],
      menuList:[],
      userList:[],
      menus:[],
      roleId:undefined
    }
  },
  created() {
    this.getAllRole()
  },
  methods:{
    //获取组织信息
    getAllRole(){
      getRoleList().then(res => {
        this.roleList = res.data;
      })
    },

    // 同时获取权限 和 用户
    getMenuOrUserList(roleId){
      if(roleId !== null){
        this.roleId = roleId
        getUserOrMenuListByRoleId(this.roleId).then(res => {
          this.menuList = res.data.menuList
          this.userList = res.data.userList
          this.menus = res.data.menus
        })
      }
    },

    // 根据条件查询组织权限
    getMenuList(menuList){
      this.menuList = menuList
    },

    // 获取组织权限和人员信息
    getUserList(userList){
      this.userList = userList
    },

  }
}
</script>

<style scoped>

</style>
